<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Mockup</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
img.play {
	border: 0;
	margin-right: 3px;
	margin-left: 3px;
}

body {
	font-size: small;
	max-width: 45em;
}

#addSongBox {
	text-align: right;
}

#maxVotes {
	font-weight: bold;
}

.description {
	margin-left: 3px;
}

.totalPositive {
	font-size: large;
	font-weight: bold;
	color: green;
	width: 2em;
	text-align: right;
}

.totalNegative {
	font-size: large;
	font-weight: bold;
	color: red;
	width: 2em;
	text-align: right;
}

.totalNeutral {
	font-size: large;
	font-weight: bold;
	color: black;
	width: 2em;
	text-align: right;
}

.actionOverSong {
	font-size: x-small;
	color: gray;
	margin-left: 4px;
}

.actionBox {
	display: inline;
	visibility: hidden;
}

.actionBox input {
	font-size: x-small;
}

ul {
	border: 0 none;
	margin: 0;
	padding: 0;
}

ul li {
	list-style-image: none;
	list-style-position: outside;
	list-style-type: none;
}

</style>
<script type="text/javascript">
//<![CDATA[
function compareOptions(a, b) {
	return b.totalVotes - a.totalVotes;
	//um dia comparo strings
}



function BallotBox() {
	this.options = new Array();
	this.voteMap = new Array();

	this.voteFor = function(option, user) {
		//vota...
		//this.voteMap[option].totalVotes = this.voteMap[option].totalVotes + 1; //isso tem chance de funcionar?
		//this.voteMap[option].push(user); //e isso?
		//this.options.sort(compareOptions);
	}

	this.voteAgainst = function(option, user) {
		//vota...
		//this.options.sort(compareOptions);
	}

	this.voteNeutral = function(option, user) {
		//vota...
		//this.options.sort(compareOptions);
	}

	this.getVotes = function(user) {
		return this.options.slice(0); //slice(0) para retornar uma cópia do array
	}

	this.addOption = function(option) {
		this.options.push(option);
		this.options.sort(compareOptions);
	}

	this.removeOption = function(option) {
	}

	this.getOptionsCount = function() {
		this.options.length;
	}
}



function Option(id, description, totalVotes, userVote) {
	this.id = id;
	this.description = description;
	this.totalVotes = totalVotes;
	this.userVote = userVote;

	this.getTotalVotesAsString = function() {
		return (this.totalVotes > 0 ? "+" : "") + new Number(this.totalVotes).toString();
	}

	this.getUserVoteAsString = function() {
		return (this.userVote > 0 ? "+" : "") + new Number(this.userVote).toString();
	}
}



function displayActions() {
	this.childNodes[3].style.visibility = "visible";
}

function hideActions() {
	this.childNodes[3].style.visibility = "hidden";
}



function renderOption(option) {
	var li = document.createElement("li");
	li.addEventListener("mouseover", displayActions, false);
	li.addEventListener("mouseout", hideActions, false);

	var votes = document.createElement("span");
	votes.appendChild(document.createTextNode(option.getTotalVotesAsString()));
	votes.className = option.totalVotes == 0 ? "totalNeutral" : (option.totalVotes > 0 ? "totalPositive" : "totalNegative");
	li.appendChild(votes);

	var optionDescription = document.createElement("span");
	optionDescription.className = "description";
	optionDescription.appendChild(document.createTextNode(option.description));
	li.appendChild(optionDescription);

	var yourVoteLabel = document.createElement("span");
	yourVoteLabel.className = "actionOverSong";
	yourVoteLabel.appendChild(document.createTextNode("Your vote: " + option.getUserVoteAsString() + ". "));
	li.appendChild(yourVoteLabel);

	var actionsBox = document.createElement("div");
	actionsBox.className = "actionBox";
	li.appendChild(actionsBox);

	var changeVoteLabel = document.createElement("a");
	changeVoteLabel.className = "actionOverSong";
	changeVoteLabel.href = "#";
	changeVoteLabel.appendChild(document.createTextNode("Change it"));
	actionsBox.appendChild(changeVoteLabel);

	var orLabel = document.createElement("span");
	orLabel.className = "actionOverSong";
	orLabel.appendChild(document.createTextNode(" or "));
	actionsBox.appendChild(orLabel);

	var voteNeutralLabel = document.createElement("a");
	voteNeutralLabel.className = "actionOverSong";
	voteNeutralLabel.href = "#";
	voteNeutralLabel.appendChild(document.createTextNode("remove this option."));
	actionsBox.appendChild(voteNeutralLabel);

	var playlistView = document.getElementById("playlist");
	playlistView.appendChild(li);
}

function changeVote(optionId) {
	return false;
}

var ballot = new BallotBox();
ballot.addOption(new Option(2, "Opção 2", 0, 0));
ballot.addOption(new Option(1, "Opção 4", -2, 1));
ballot.addOption(new Option(1, "Opção 1", 2, 1));
ballot.addOption(new Option(3, "Opção 3", -2, 0));

function renderAll() {
	var playlistView = document.getElementById("playlist");
	for (i in playlistView.childNodes) {
		playlistView.innerHTML = "";
	}

	for (i in ballot.options) {
		renderOption(ballot.options[i]);
	}
}

//]]>
</script>
</head>
<body onload="renderAll();">

<form method="get" action="#" accept-charset="UTF-8">
	<div id="addSongBox">
		<input type="text" name="song"/>
		<input type="submit" value="Add" onclick="ballot.addOption(new Option(0, document.forms[0].elements[0].value, (new Number(Math.random() * 10)).toFixed(0), 0)); renderAll(); document.forms[0].elements[0].value = ''; return false;"/>
	</div>
</form>

<ol id="playlist">
<!--
	<li>
		<div><span class="totalPositive">+1</span></div>
		<a href="#"><img class="play" src="play.png" alt="Play"/></a>
		<span>Portishead - Glory Box</span>
		<div class="actionBox">
			<a class="actionOverSong" href="#">change vote</a>
			<a class="actionOverSong" href="#">remove</a>
		</div>
	</li>
	<li>
		<span class="totalNeutral">0</span>
		<a href="#"><img class="play" src="play.png" alt="Play"/></a>
		<span>Dave Mathews Band - Stand Up</span>
		<div class="actionBox">
			<a class="actionOverSong" href="#">change vote</a>
			<a class="actionOverSong" href="#">remove</a>
		</div>
	</li>
	<li id="exemplo">
		<span class="totalNegative">-4</span>
		<a href="#"><img class="play" src="play.png" alt="Play"/></a>
		<span>Tequileiras do Funk - Surra de bunda</span>
		<div class="actionBox">
			<a class="actionOverSong" href="#">Vote +1</a>
			<a class="actionOverSong" href="#">Vote 0</a>
			<a class="actionOverSong" href="#">Vote -1</a>
			<a class="actionOverSong" href="#">remove</a>
		</div>
	</li>
--></ol>
</body>
</html>

